<script setup>
import { ref, onMounted, inject } from "vue";
import { ElMessage } from "element-plus";
import { Search, Edit, Check, Close } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { BREADCRUMBS } from "@/plugins/global";

const axios = inject("axios"), router = useRouter();

// ---- 初始化。
onMounted(() => {
  BREADCRUMBS.splice(0, BREADCRUMBS.length,
    { "label": "应用列表", "path": "/home/app_list" }
  );
  appQuery();
});

// ---- 应用查询。
const apps = ref([]), appTotal = ref(null), appCondition = ref({
  "page": 1,
  "num": 10,
  "appNameFuzzy": null
});
const appQuery = () => {
  axios.get("/api/cms-web/app/queries", {
    params: {
      "page": appCondition.value.page,
      "num": appCondition.value.num,
      "total": true,
      "appNameFuzzy": appCondition.value.appNameFuzzy
    }
  }).then(response => {
    if (response.data.success) {
      apps.value = response.data.data.data;
      appTotal.value = response.data.data.total;
    } else {
      ElMessage.error(response.data.message);
    }
  });
}

// ---- 应用禁用准备。
const appDisableFlag = ref(false), appDisable = ref(null);
const appDisablePrepare = (app) => {
  appDisableFlag.value = true;
  appDisable.value = app;
}

// ---- 应用禁用确认。
const appDisableConfirm = (appCode, disable) => {
  axios.put("/api/cms-web/app/disable", {
    "appCode": appCode,
    "disable": disable
  }).then(response => {
    if (response.data.success) {
      ElMessage.success(disable ? "禁用成功！" : "启用成功！");
      appQuery();
      appDisableFlag.value = false;
    } else {
      ElMessage.error(response.data.message);
    }
  });
}
</script>

<template>
  <!-- 应用查询域 -->
  <div class="app-list-page-div-class">
    <div style="width: 100%">
      <el-form :inline="true" :model="appCondition">
        <el-form-item label="名称">
          <el-input v-model="appCondition.appNameFuzzy" :prefix-icon="Search" clearable style="width: 200px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="appQuery()">查询</el-button>
          <el-button @click="router.push('/home/app_upsert')">插入</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="app-query-table-div-class">
      <el-table :data="apps" stripe style="width: 100%">
        <el-table-column prop="appCode" label="编码" align="center" />
        <el-table-column prop="name" label="名称" align="center" />
        <el-table-column label="操作" fixed="right" align="center">
          <template #default="scope">
            <el-button :icon="Edit" circle type="primary"
              @click="router.push(`/home/app_upsert/${scope.row.appCode}`)" />
            <el-tooltip content="启用" placement="right" effect="light" v-if="scope.row.disable">
              <el-button :icon="Check" circle @click="appDisableConfirm(scope.row.appCode, false)" />
            </el-tooltip>
            <el-tooltip content="禁用" placement="right" effect="light" v-else>
              <el-button type="info" :icon="Close" circle @click="appDisablePrepare(scope.row)" />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="app-query-pagination-div-class">
      <el-pagination background layout="total, prev, pager, next, sizes" size="small" :page-sizes="[10, 20, 50, 100]"
        :total="appTotal" v-model:page-size="appCondition.size" v-model:current-page="appCondition.page"
        @upsert:page-size="appQuery()" @upsert:current-page="appQuery()" />
    </div>
  </div>
  <!-- 应用禁用域 -->
  <el-dialog header="确认禁用" v-model="appDisableFlag" width="30%" style="padding: 30px 20px 20px 20px;">
    <div style="padding-bottom: 10px">您确定要禁用应用[{{ appDisable.appCode }} - {{ appDisable.name }}]吗？这将导致用户无法继续访问该应用！</div>
    <template #footer>
      <span>
        <el-button @click="appDisableFlag = false">取消</el-button>
        <el-button type="primary" @click="appDisableConfirm(appDisable.appCode, true)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.app-list-page-div-class {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
  height: 100%;
  padding: 20px 20px 20px 20px;
}

.app-query-table-div-class {
  flex: 1;
  width: 100%;
  overflow: hidden;
}

.app-query-pagination-div-class {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
}
</style>
